<!-- 添加新闻 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label">{{iscompile?"编辑":"添加"}}新闻</p>
        <div class="kjknsertw">
            <n-form ref="formRef" label-width="120" :inline="false" size="normal" label-placement="left" :model="formValue"
                :rules="rules">
                <n-grid :cols="24" :x-gap="20">
                    <n-form-item-gi span="24" label="新闻标题:" path="title" class="mt20">
                        <n-input v-model:value="formValue.title" type="text" placeholder="请输入新闻标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>

               <n-form-item-gi span="24" label="封面:" path="cover" class="mt20">
                        <div class="kjjjmsertwe">
                            
                            <div class="logo-context vertical-center ab" @click="photoShowModal = true">
                                <img :src="formValue.cover" class="w100 h100 imgjz" v-if="formValue.cover" />
                                <span v-else>点击上传新闻封面</span>
                            </div>
                        </div>
                    </n-form-item-gi> 
                    <n-form-item-gi span="12" label="新闻分类:" path="classify" class="mt20">
                            <n-select v-model:value="formValue.classify" size="medium" :options="classifyoptions" clearable />
                            
                    </n-form-item-gi>
                 
                    <n-form-item-gi span="24" label="详情介绍:" path="" class="mt20">
                        <div class="details-box">
                            <tinymce ref="tinymceref"></tinymce>
                        </div>
                        <div class="operating-button  mt20">
                            <n-button size="medium" type="primary" @click="addcpfun">{{iscompile?"保存":"添加"}}新闻</n-button>
                            <n-button size="medium" @click="callBack" class="ml10">返回</n-button>

                        </div>
                    </n-form-item-gi>
                </n-grid>
            </n-form>
        </div>

        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>logo</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" :types="'产品banner' + Userid"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { dxget, dxpost, callBack,qurl } from "../../../util";
import { ref } from "vue";
import photoGallery from "../../../components/util/photoGallery";
import tinymce from "../../../components/util/tinymce.vue"
const cz = qurl()
const photoShowModal = ref()
const classifyoptions = ref()
const tinymceref = ref()
const Userid = ref(localStorage.Userid)
const jhhjer = ref([])
const formRef = ref()
const iscompile = ref(false) // true为编辑的状态
const apiurl="xinglianxin/xlxnewsEN"
const formValue = ref({
    title: "",//标题
    cover: "",//封面
    classify: "",
    particulars: "" //详情
})

const rules = {
    title: {
        required: true,
        message: '输入产品标题',
        trigger: 'blur'
    }, classify: {
        required: true,
        message: '请选择新闻分类',
        trigger: 'blur'
    }
}
let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    formValue.value.cover = jjnmnxe
    photoShowModal.value = false;
};


const getfl = async () => {
    const { data }: any = await dxget("dxgjAdmin/getzd/getzdList", {
        ids: "128"
    })
    try{
        classifyoptions.value = JSON.parse(data[0].text)
        console.log(data.text);
    }catch(e){
        console.log(e);
    }
}
getfl()
const addcpfunser = async () => {
    formValue.value.particulars = tinymceref.value.getContent()
    formValue.value['detailedbrief'] = tinymceref.value.gettext().trim().slice(0,100)
    const { errno }: any = await dxpost(apiurl, formValue.value,iscompile.value?"put":"post")
    if (errno == 0) {
        window.$message.success("操作成功！")
        callBack()
    }
}
const addcpfun = (e) => {
    e.preventDefault();
    formRef.value.validate((errors) => {
        if (!errors) {
            addcpfunser()
        }
    });
}
const initData = async()=>{
    const {data}:any = await dxget(apiurl,{id:cz.id})
    console.log(data);
    formValue.value = data
    tinymceref.value.setContent(data.particulars)
}
if(cz.id){
    iscompile.value = true
    initData()
}


</script>
<style scoped>
.details-box {
    width: 1200px;
    height: 600px;
}

.page-box {
    overflow: auto;
    padding-bottom: 88px;
}
</style>